<!--车型管理-->
<template>

    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">

            <!--搜索条件-->
            <el-row class="text-left">
                <el-col :span="10">
                    <div class="dlblock-mb20">
                        <span class="pr5">车型</span>
                        <el-cascader
                                :props="{value: 'id', label: 'name',  checkStrictly: true,expandTrigger: 'hover' }"
                                :show-all-levels="false"
                                clearable
                                style="width: 150px" v-model="query.groups"></el-cascader>
                    </div>
                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">品牌</span>
                        <!--                        <el-select clearable style="width: 150px" v-model="query.route">-->
                        <!--                            <el-option>11111</el-option>-->
                        <!--                        </el-select>-->
                    </div>

                    <div class="dlblock-mb20 pr5 pl5">
                        <el-button @click="query.page = 1,getStationFn()" circle class="el-icon-search ml5"></el-button>
                    </div>
                </el-col>

                <el-col :span="13" align="right">
                    <div class="dlblock-mb20 pr10 ml20">
                        <router-link :to="{path: '/station/edit'}">
                            <el-button type="primary">添加</el-button>
                        </router-link>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button @click="deleteAll" type="danger">删除</el-button>
                    </div>

                </el-col>
            </el-row>

            <!--车辆类型编辑弹出框-->
            <el-dialog
                    :before-close="handleClose"
                    :visible.sync="dialogVisible"
                    title="车型管理"
                    width="75%">

                <el-form label-position="right" label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="车型名称">
                                <el-input v-model="list.name" placeholder="请输入内容"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="名牌名称">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="指导价格">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="活动形式">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="能源类型">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="车型级别">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="载重类型">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="驾照等级">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="排放标准">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="排放标准阶段">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="气缸排列方式">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="气缸数">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="驾照等级">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="排放标准">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="排放标准阶段">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="车型级别">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="载重类型">
                                <el-input style="width: 100px"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="驾照等级">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="排放标准">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="排放标准阶段">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>

                <span class="dialog-footer" slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button @click="dialogVisible = false" type="primary">确 定</el-button>
                </span>
            </el-dialog>

            <!--表格-->
            <el-row>
                <el-table
                        :data="vehicleTypeList"
                        @selection-change="selectionchange"
                        border
                        class="my-table"
                        header-row-class-name="my-table-header" stripe
                >
                    <el-table-column align="center" fixed type="selection" width="80"></el-table-column>
                    <el-table-column align="center" label="车型" prop="name" width="100px"></el-table-column>
                    <el-table-column align="center" label="品牌" prop="no" width="100"></el-table-column>
                    <el-table-column align="center" label="国标类型" prop="code"></el-table-column>
                    <el-table-column align="center" label="座位数" prop="code"></el-table-column>
                    <el-table-column align="center" label="排量" prop="code"></el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="150">
                        <template slot-scope="{row}">
                            <p>
                                <el-button @click="dialogVisible = true" style="color: #609eff" type="text">编辑
                                </el-button>
                                <el-button @click="deleteOne(row.id)" style="color: #f56c6c" type="text">删除</el-button>
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <br>

            <!--分页控件-->
            <el-row :gutter="20">
                <el-col :offset="6" :span="12" align="center">
                    <el-pagination :current-page="query.page" :page-size="query.size" :total="query.total"
                                   @current-change="pageChange"
                                   background layout="total, prev, pager, next">
                    </el-pagination>
                </el-col>
            </el-row>

        </div>
    </div>

</template>

<script>

    import {deleteVehicleType, getVehicleType} from "@/api"

    export default {
        name: "index1",
        components: {},
        data() {
            return {
                //弹出框
                dialogVisible: false,

                //查询参数
                query: {
                    groups: [],
                    route: '',
                    name: '',
                    page: 1,
                    size: 6,
                    total: 0,
                },

                //车型列表
                vehicleTypeList: [],

                //车型列表封装对象
                list: {},

                //多选id
                deviceTypeIds: []
            }
        },

        created() {
        },

        watch: {},

        methods: {

            //编辑弹出框
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },

            //删除车辆类型
            deleteOne(id) {
                this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deviceTypeIds = []
                    this.deviceTypeIds.push(id)
                    deleteVehicleType(this.deviceTypeIds).then(res => {
                        if (res.code == 200) {
                            this.$message({type: 'success', message: '删除成功'});
                            this.getVehicleTypeFn()
                        } else {
                            this.$message({type: 'error', message: '删除失败'});
                        }
                    })
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                });
            },

            //车辆多选
            selectionchange(val) {
                this.deviceTypeIds = []
                val.forEach(x => {
                    this.deviceTypeIds.push(x.id)
                });
            },

            //删除全部
            deleteAll() {
                if (this.deviceTypeIds.length != 0) {
                    this.$confirm('此操作将永久删除该站点, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        deleteVehicleType(this.deviceTypeIds).then(res => {
                            if (res.code == 200) {
                                this.$message({type: 'success', message: '删除成功'});
                                this.getVehicleTypeFn()
                            } else {
                                this.$message({type: 'error', message: '删除失败'});
                            }
                        })
                    }).catch(() => {
                        this.$message({type: 'info', message: '已取消删除'});
                    });
                } else {
                    this.$message({type: 'error', message: '请先选择站点'});
                }
            },

            //获取车辆类型信息
            getVehicleTypeFn() {
                getVehicleType({}).then(res => {
                    console.log(res.data.list)
                    this.vehicleTypeList = res.data.list
                    this.query.total = res.data.count
                })
            },

            // 分页查询
            pageChange(val) {
                this.query.page = val
                this.getVehicleTypeFn()
            },

        },

        mounted() {
            this.getVehicleTypeFn()
        }

    }
</script>

<style scoped>
    .my-table /deep/ tr, .my-table /deep/ td {
        padding: 5px !important;
        height: 50px;
        line-height: 50px;
    }
</style>
